<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>我的信息</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <link rel="stylesheet" href="/static/css/weui.css"/>
        <link rel="stylesheet" href="/static/css/weuix.css"/>
        <script src="/static/js/zepto.min.js"></script>
        <script src="/static/js/zepto.weui.js"></script>
        <script src="/static/js/lrz.min.js"></script>
        <script src="/static/js/php.js"></script>
        <script src="/static/js/baseJs/base.js"></script>
        <style>
            /**
                头像圆
             */
            .weui-media-box__thumb {
                border-radius: 100%
            }

            .weui-media-box {
                padding: 10px;
                position: relative;
            }

            /*字体 标题*/
            .body {
                font-family: "Microsoft YaHei", 微软雅黑, "Microsoft JhengHei", 华文细黑, STHeiti, MingLiu
            }

            /*弹框 圆*/
            .weui-dialog, .weui-toast {
                border-radius: 20px
            }

            /**
                弹框颜色
             */
            .weui-dialog__btn {
                color: #FF6600;
            }

            .weui-uploader__input-box {
                border: 0px solid #D9D9D9;
                background-color: rgba(0, 0, 0, 0);
                border-radius: 20px

            }

            .weui-uploader__input-box:before, .weui-uploader__input-box:after {
                background-color: rgba(0, 0, 0, 0);
                border: 0px solid #D9D9D9;
                width: 0;
                height: 0;
            }

        </style>
    </head>
    <body ontouchstart class="page-bg body ">
        <div class="weui-header bg-orange" style="position: fixed;top: 0; width: 100%;z-index: 500;padding: 25px 0">
            <div class="weui-header-left"><a href="/myPage/info" class="icon icon-109 f-white">返回</a></div>
        </div>
        <div class="page-bd" style="padding-top: 45px">
            <div class="weui-panel weui-panel_access">
                <label for="headUpBox">
                    <div id="headUp" class="weui-panel__ft">
                        <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                            <div class="weui-media-box__bd">
                                <span class="weui-media-box__title" style="color: black;font-size: 15px">头像</span>
                            </div>
                            <div class="weui-uploader__input-box"
                                 style="display: inline-block;height: 54px;width: 54px;background-size:contain">
                                <input class="weui-uploader__input" id="headUpBox" accept="image/*" multiple=""
                                       type="file"
                                       onchange="previewImage(this)">
                            </div>
                        </a>
                    </div>
                </label>
                <div class="weui-panel__ft" id="topUserName">
                    <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg"
                       style="border-top: 1px solid #e5e5e5;">
                        <div class="weui-media-box__bd">
                            <span class="weui-media-box__title" style="color: black;font-size: 15px">用户名</span>
                        </div>
                        <span id="username" style="font-size: 13px ;color: #a699b3">
                            昵称
                        </span>
                    </a>
                </div>
                <!--性别-->
                <div class="weui-panel__ft" id="topSex">
                    <label for="infoGender" class="weui-label"
                           style="font-size: 15px;font-weight: 400;width: auto">
                        <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg"
                           style="border-top: 1px solid #e5e5e5;color: black">
                            <div class="weui-cell__hd">
                                性别
                            </div>
                            <div class="weui-cell__bd">
                            </div>
                            <div class="weui-cell__bd">
                            </div>
                            <div class="weui-cell__bd">
                            </div>
                            <div class="weui-cell__bd">
                            </div>
                            <div class="weui-cell__bd">
                            </div>
                            <div class="weui-cell__bd">
                            </div>
                            <div class="weui-cell__bd">
                            </div>
                            <div class="weui-cell__bd">
                                <input class="weui-input" id="infoGender" type="text" value="" style="color: #a699b3">
                            </div>
                        </a>
                    </label>
                </div>
                <div class="weui-panel__ft" id="identityUp">
                    <a href="javascript:void(0);" class="weui-media-box  weui-media-box_appmsg"
                       style="border-top: 1px solid #e5e5e5; ">
                        <div class="weui-media-box__bd">
                            <span class="weui-media-box__title" style="color: black;font-size: 15px">身份证信息</span>
                        </div>
                        <span id="identity" style="font-size: 13px ;color: #a699b3">
                            未填写
                        </span>
                        <span class="weui-cell__ft"></span>
                    </a>
                </div>
                <div class="weui-panel__ft" id="infoAgeUp" style="border-top: 1px solid #e5e5e5;">
                    <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg" style=" padding: 0;color: black">
                        <div class="weui-cell">
                            <div class="weui-cell__hd"><label for="Age" class="weui-label"
                                                              style="font-size: 15px;font-weight: 400">年龄</label></div>
                            <div class="weui-cell__bd">
                            </div>
                            <div class="weui-cell__bd">
                            </div>
                            <div class="weui-cell__bd">
                            </div>
                            <div class="weui-cell__bd" style="color:  #a699b3;padding-left: 120px">
                                <input class="weui-input" id="Age" type="text" value="">
                            </div>
                        </div>
                    </a>
                </div>
                <div class="weui-panel__ft" id="phoneUp">
                    <a href="javascript:void(0);" class="weui-media-box  weui-media-box_appmsg"
                       style="border-top: 1px solid #e5e5e5; ">
                        <div class="weui-media-box__bd">
                            <span class="weui-media-box__title" style="color: black;font-size: 15px">手机号</span>
                        </div>
                        <span id="phone" style="font-size: 13px ;color: #a699b3">

                        </span>
                        <span class="weui-cell__ft"></span>
                    </a>
                </div>
                <div class="weui-panel__ft" id="signatureUp">
                    <a href="javascript:void(0);" class="weui-media-box  weui-media-box_appmsg"
                       style="border-top: 1px solid #e5e5e5; ">
                        <div class="weui-media-box__bd">
                            <span class="weui-media-box__title" style="color: black;font-size: 15px">个性签名</span>
                        </div>
                        <span id="signature" style="font-size: 13px ;color: #a699b3">

                        </span>
                        <span class="weui-cell__ft"></span>
                    </a>
                </div>
                <div class="weui-panel__ft" id="emailUp">
                    <a href="javascript:void(0);" class="weui-media-box  weui-media-box_appmsg"
                       style="border-top: 1px solid #e5e5e5; ">
                        <div class="weui-media-box__bd">
                            <span class="weui-media-box__title" style="color: black;font-size: 15px">邮箱</span>
                        </div>
                        <span id="email" style="font-size: 13px ;color: #a699b3">

                        </span>
                        <span class="weui-cell__ft"></span>
                    </a>
                </div>
                <div class="weui-panel__ft" id="loginOutUp">
                    <a href="javascript:void(0);" class="weui-media-box  weui-media-box_appmsg"
                       style="border-top: 1px solid #e5e5e5; ">
                        <div class="weui-media-box__bd">
                            <span class="weui-media-box__title" style="color: black;font-size: 15px">退出登录</span>
                        </div>
                        <span id="loginOut" style="font-size: 13px ;color: #a699b3">

                        </span>
                        <span class="weui-cell__ft"></span>
                    </a>
                </div>
            </div>
        </div>
        <script>
            var item = JSON.parse(localStorage.getItem('userLogin'));
            //修改昵称
            $('#username').text(item.userInfo.infoName);
            //手机号
            $('#phone').text(item.userInfo.infoPhone);
            //年龄
            $('#Age').val(item.userInfo.infoAge);
            //个性签名
            $('#signature').text(item.userInfo.infoSignature);
            //性别
            $('#infoGender').val(item.userInfo.infoGender === 3 ? '保密' : item.userInfo.infoGender === 2 ? '女' : '男');
            //邮箱
            $('#email').text(item.userInfo.infoEmail);
            //身份证
            $('#identity').text(item.userInfo.infoCard);

            //头像修改方法
            function previewImage(file) {
                var MAXWIDTH = 1000;
                var MAXHEIGHT = 1200;
                if (file.files && file.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (evt) {
                        $.post("/userInfo/img", {
                            imgbase64: evt.target.result,
                            infoId: item.userInfo.infoId,
                            logId: item.logId
                        }, function (rs) {
                            if (rs.code === 200) {
                                //修改成功 更新userinfo
                                localStorage.setItem("userLogin", JSON.stringify(rs.data.userLogin));
                                var item2 = JSON.parse(localStorage.getItem('userLogin'));
                                $('.weui-uploader__input-box').css('background-image', 'url(' + item2.userInfo.infoHeadUrl + ')')
                            } else {
                                //修改不成功
                                console.log("失败")
                            }
                        }, 'json');
                    };
                    reader.readAsDataURL(file.files[0]);
                    console.log(file.files[0]);
                }
            }

            $(function () {
                //修改头像
                $('.weui-uploader__input-box').css('background-image', 'url(' + item.userInfo.infoHeadUrl + ')')

                //昵称
                $(document).on("click", "#topUserName", function () {
                    $.prompt({
                        title: '昵称',
                        text: '请输入您的昵称1-10位',
                        input: item.userInfo.infoName,
                        empty: false, // 是否允许为空
                        onOK: function (input) {
                            console.log(!(input.length > 10));
                            if (input.length > 0 && input.length <= 10) {
                                //点击确认
                                function fun(rel) {
                                    if (rel.code == 200) {
                                        //修改成功 更新userinfo
                                        localStorage.setItem("userLogin", JSON.stringify(rel.data.userLogin));
                                        var item2 = JSON.parse(localStorage.getItem('userLogin'));
                                        $('#username').text(item2.userInfo.infoName);
                                    } else {
                                        $.toast("取消操作", "cancel");
                                    }
                                }

                                ajaxBase('/userInfo/updateBase', 'post', {
                                    infoId: item.userInfo.infoId,
                                    infoName: input,
                                    logId: item.logId
                                }, 'json', fun);
                            } else {
                                $.toast("取消操作", "cancel");
                            }
                        },
                        onCancel: function () {
                            //点击取消
                        }
                    });
                });
                //身份证信息
                $(document).on("click", "#identityUp", function () {
                    $.prompt({
                        title: '身份证信息',
                        text: '请输入您的身份证信息',
                        input: item.userInfo.infoCard,
                        empty: false, // 是否允许为空
                        onOK: function (input) {
                            //点击确认 判断是不是身份证号
                            if (/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/g.test(input)) {
                                //点击确认
                                function fun(rel) {
                                    console.log(rel);
                                    //修改成功 更新userinfo
                                    localStorage.setItem("userLogin", JSON.stringify(rel.data.userLogin));
                                    var item2 = JSON.parse(localStorage.getItem('userLogin'));
                                    $('#identity').text(item2.userInfo.infoCard);
                                }

                                ajaxBase('/userInfo/updateBase', 'post', {
                                    infoId: item.userInfo.infoId,
                                    infoCard: input,
                                    logId: item.logId
                                }, 'json', fun);
                            } else {
                                $.toast("取消操作", "cancel");
                            }
                        },
                        onCancel: function () {
                            //点击取消
                        }
                    });
                });
                //退出
                $(document).on("click", "#loginOutUp", function () {
                    $.confirm("您确定要退出吗?退出之后无法查看订单", "退出?", function () {
                        $.toast("退出成功!");
                        /**
                         * 退出登录
                         */
                        localStorage.removeItem('token');//清除值
                        localStorage.removeItem('userLogin');//清除值
                        //跳转页面
                        location = "/myPage/info";
                    }, function () {
                        //取消操作
                    });
                });
                //个性签名
                $(document).on("click", "#signatureUp", function () {
                    $.prompt({
                        title: '个性签名',
                        text: '请输入您的个性签名',
                        input: item.userInfo.infoSignature,
                        empty: false, // 是否允许为空
                        onOK: function (input) {
                            console.log(input)
                            //点击确认 判断有没有输入信息
                            if (input.length > 0) {
                                //点击确认
                                function fun(rel) {
                                    console.log(rel);
                                    if (rel.code === 200) {
                                        //修改成功 更新userinfo
                                        localStorage.setItem("userLogin", JSON.stringify(rel.data.userLogin));
                                        var item2 = JSON.parse(localStorage.getItem('userLogin'));
                                        $('#signature').text(item2.userInfo.infoSignature);
                                    } else {

                                    }
                                }

                                ajaxBase('/userInfo/updateBase', 'post', {
                                    infoId: item.userInfo.infoId,
                                    infoSignature: input,
                                    logId: item.logId
                                }, 'json', fun);
                            } else {
                                $.toast("取消操作", "cancel");
                            }

                        },
                        onCancel: function () {
                            //点击取消
                        }
                    });
                });
                //手机号
                $(document).on("click", "#phoneUp", function () {
                    $.prompt({
                        title: '手机号修改',
                        text: '请输入您的手机号',
                        input: item.userInfo.infoPhone,
                        empty: false, // 是否允许为空
                        onOK: function (input) {
                            //点击确认
                            if (/((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)/g.test(input)) {
                                //点击确认
                                function fun(rel) {
                                    console.log(rel);
                                    //修改成功 更新userinfo
                                    localStorage.setItem("userLogin", JSON.stringify(rel.data.userLogin));
                                    var item2 = JSON.parse(localStorage.getItem('userLogin'));
                                    $('#phone').text(item2.userInfo.infoPhone);
                                }

                                ajaxBase('/userInfo/updateBase', 'post', {
                                    infoId: item.userInfo.infoId,
                                    infoPhone: input,
                                    logId: item.logId
                                }, 'json', fun);
                            } else {
                                $.toast("取消操作", "cancel");
                            }

                        },
                        onCancel: function () {
                            //点击取消
                        }
                    });
                });
                //性别
                $("#infoGender").select({
                    title: "性别",
                    items: [
                        {
                            title: '男',
                            value: 1,
                        },
                        {
                            title: '女',
                            value: 2,
                        },
                        {
                            title: '保密',
                            value: 3,
                        }],
                    onChange: function (d) {
                        console.log(d)
                        $.post('/userInfo/updateBase',
                            {
                                infoId: item.userInfo.infoId,
                                infoGender: d.values,
                                logId: item.logId
                            },
                            function (rel) {
                                console.log(rel)
                                //修改成功 更新userinfo
                                localStorage.setItem("userLogin", JSON.stringify(rel.data.userLogin));
                                var item2 = JSON.parse(localStorage.getItem('userLogin'));
                                $('#infoGender').val(item2.userInfo.infoGender === 3 ? '保密' : item2.userInfo.infoGender === 2 ? '女' : '男');
                            }, 'json');
                    },
                    onClose: function () {
                        console.log("close");
                    },
                    onOpen: function () {
                        console.log("open");
                    },
                });
                //年龄
                let age;
                $("#Age").picker({
                    title: "请选择您的年龄",
                    cols: [
                        {
                            textAlign: 'center',
                            values: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59', '60', '61', '62', '63', '64', '65', '66', '67', '68', '69', '70', '71', '72', '73', '74', '75', '76', '77', '78', '79', '80', '81', '82', '83', '84', '85', '86', '87', '88', '89', '90', '91', '92', '93', '94', '95', '96', '97', '98', '99', '100', '101', '102', '103', '104', '105', '106', '107', '108', '109', '110', '111', '112', '113', '114', '115', '116', '117', '118', '119', '120']
                        }
                    ],
                    onChange: function (p, v, d) {
                        //点击和滑动触发事件
                        age = d[0];
                    },
                    onClose: function (p, v, d) {
                        //点击外面确定事件 和确定事件
                        console.log("close");
                        $.post('/userInfo/updateBase',
                            {
                                infoId: item.userInfo.infoId,
                                infoAge: age,
                                logId: item.logId
                            },
                            function (rel) {
                                console.log(rel)
                                //修改成功 更新userinfo
                                localStorage.setItem("userLogin", JSON.stringify(rel.data.userLogin));
                                var item2 = JSON.parse(localStorage.getItem('userLogin'));
                            }, 'json');
                    }
                });
                //邮箱
                $(document).on("click", "#emailUp", function () {
                    $.prompt({
                        title: '修改邮箱',
                        text: '请输入您的邮箱',
                        input: item.userInfo.infoEmail,
                        empty: false, // 是否允许为空
                        onOK: function (input) {
                            //点击确认 判断是不是邮箱
                            if (/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/g.test(input)) {
                                //点击确认
                                function fun(rel) {
                                    console.log(rel);
                                    //修改成功 更新userinfo
                                    localStorage.setItem("userLogin", JSON.stringify(rel.data.userLogin));
                                    var item2 = JSON.parse(localStorage.getItem('userLogin'));
                                    $('#email').text(item2.userInfo.infoEmail);
                                }
                                ajaxBase('/userInfo/updateBase', 'post', {
                                    infoId: item.userInfo.infoId,
                                    infoEmail: input,
                                    logId: item.logId
                                }, 'json', fun);
                            } else {
                                $.toast("取消操作", "cancel");
                            }
                        },
                        onCancel: function () {
                            //点击取消
                        }
                    });
                });
            })
        </script>
    </body>
</html>